<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scrolltolower="infiniteScroll">
      <ul class="list">
        <li class="list-item"
            v-for="(item, index) in list_data"
            :key="index">
          <div class="left">
            <div class="msg">{{item.msg}}</div>
            <div class="time">{{item.time_str}}</div>
          </div>
          <div class="right">{{item.amount}}</div>
        </li>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
import "@/assets/js/timeFormat.js";
export default {
  onLoad () {
    wx.setNavigationBarTitle({
      title: "积分明细"
    });
    this.get_list();
    Object.assign(this.$data, this.$options.data());
  },
  data () {
    return {
      page: 1,
      list_data: [],
      isbottom: false
    };
  },
  methods: {
    infiniteScroll () {
      this.page++;
      this.get_list();
    },
    get_list () {
      if (this.isbottom) {
        return false;
      }
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true //显示透明蒙层，防止触摸穿透
      });
      common.fly_post("api/v4_2/amount_water", {
        type: 2,
        page: this.page,
        pageSize: 20
      }, result => {
        wx.hideLoading();
        let res = result.data;
        if (res.status_code == 0) {
          if (res.data.length == 0 && this.page > 1) {
            wx.showToast({
              title: "没有更多了", //提示的内容,
              icon: "none", //图标,
              duration: 2000, //延迟时间,
              mask: false //显示透明蒙层，防止触摸穿透,
            });
            this.isbottom = true;
          }
          res.data.forEach(element => {
            element.time_str = new Date(element.time * 1000).Format(
              "yyyy/MM/dd hh:mm:ss"
            );
          });
          this.list_data.push(...res.data);
        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(251, 251, 251, 1);
  box-sizing: border-box;
  .list {
    width: 100%;
    background-color: #fff;
    .list-item {
      height: 50px;
      margin: 0 15px;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
      .left {
        float: left;
        line-height: 17px;
        padding-top: 10px;
        .msg {
          font-size: 14px;
          font-family: "Regular";
          color: rgba(102, 102, 102, 1);
        }
        .time {
          font-size: 12px;
          font-family: "Regular";
          color: rgba(136, 136, 136, 1);
          letter-spacing: 1px;
        }
      }
      .right {
        float: right;
        height: 100%;
        line-height: 50px;
        font-size: 17px;
        font-family: "Medium";
        color: rgba(68, 68, 68, 1);
      }
      &:last-of-type {
        border-bottom: none;
      }
    }
  }
}
</style>

